<template>
  <basic-layout title="新增预约" :showAddBtn="false">
    <div class="main">
      <div class="head">
        <div class="picStyle" v-if="param.srvitemType == '1'"/>
        <div class="picStyle_liliao" v-if="param.srvitemType == '2'"/>
        <div class="picStyle_water" v-if="param.srvitemType == '3'"/>
        <div class="picStyle_clean" v-if="param.srvitemType == '4'"/>
        <div class="picStyle_laundry" v-if="param.srvitemType == '5'"/>
        <div class="picStyle_xiche" v-if="param.srvitemType == '6'"/>
        <div class="picStyle_banyun" v-if="param.srvitemType == '7'"/>
        <div class="picStyle_lvhua" v-if="param.srvitemType == '8'"/>
        <div class="rightContent">
          <div class="firstContent">
            <div class="f">
              <div>
                {{ baseData.propertyName }}
              </div>
            </div>
            <div class="s">
              地址：{{ baseData.propertyAddr }}
            </div>
            <div class="s">
              电话：{{ baseData.phone }}
            </div>
          </div>
          <div class="secondContent">
            <span>{{ baseData.servicePriceLabel }}</span>
          </div>
        </div>
      </div>

      <div class="appTime">
        <div class="titleStyle">预约时间 <span>(必填)</span></div>
        <div class="calendar">
          <div class="leftDate">
            <div class="content" id="contentWeek">
              <div v-for="(week, index) in weekArr" class="dates">
                <div :class="{ active: week.date == checkDate, leftDateStyle: true, dropShow: calcDropShow(week.date) }"
                     @click="checkItem(week)">
                  <div>{{ week.week }}</div>
                  <div>{{ week.date }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="rightCalendar" @click="dateShow = true">
            <div>
              <van-icon name="calendar-o"/>
            </div>
            <div>选择</div>
          </div>
        </div>

        <!-- 不设置人数上限 -->
        <div class="timeSlotMain"
             @touchstart="touchStart"
             @touchmove="touchMove"
             @touchend="touchEnd"
             ref="backOne"
             id="touchChangeOne"
             v-show="data.propertySrvAppRule && data.propertySrvAppRule.srvPeopleNum == -1">
          <div class="timeSlot" v-show="data.propertyAppDate && data.propertyAppDate.appMethod == '1'">
            <div class="time" v-show="data.propertyAppTimeSlots && data.propertyAppTimeSlots.length > 0">
              <div style="height: 100%"
                v-show="data.propertyAppTimeSlots && data.propertyAppTimeSlots.length > 0">
                <div class="scrollTimeSlot">
                  <div
                    v-for="(timeSlot, index) in data.propertyAppTimeSlots"
                    @click="selTimeSlot(timeSlot)"
                    :class="{ ttt01: true, selTimeSlotStyle: calcTimeSlot(timeSlot), disableStyle: timeSlot.flag == '1' || timeSlot.flag == '2' }">
                    <div class="ttt_01_01">
                      <div class="ttt_01_01_01">{{ timeSlot.beginDate }}</div>
                      <div class="ttt_01_01_02" v-if="timeSlot.flag == '1'">已约满
                      </div>
                      <div class="ttt_01_01_03" v-if="timeSlot.flag == '2'">已过期
                      </div>
                      <div class="ttt_01_01_04" v-else>
                        可预约
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="timeSlot"
               v-show="data.propertyAppDate && (data.propertyAppDate.appMethod == '2' || data.propertyAppDate.appMethod == '3')">
            <div class="time" v-show="data.propertyAppTimeSlots && data.propertyAppTimeSlots.length > 0">
              <div style="height: 100%"
                v-show="data.propertyAppTimeSlots && data.propertyAppTimeSlots.length > 0">
                <div class="scrollTimeSlot">
                  <div
                    v-for="(timeSlot, index) in data.propertyAppTimeSlots"
                    @click="selTimeSlot(timeSlot)"
                    :class="{ ttt02: true, selTimeSlotStyle: calcTimeSlot(timeSlot), disableStyle: timeSlot.flag == '1' || timeSlot.flag == '2' }">
                    <div class="ttt02_01">
                      <div class="ttt02_01_01">{{ timeSlot.timeSlotName }}</div>
                      <div class="ttt02_01_02">{{ timeSlot.beginDate }} ~
                        {{ timeSlot.endDate }}
                      </div>
                      <div class="ttt02_01_03" v-if="timeSlot.flag == '1'">已约满
                      </div>
                      <div class="ttt02_01_04" v-if="timeSlot.flag == '2'">已过期
                      </div>
                      <div class="ttt02_01_05" v-else>
                        可预约
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="emptyMain"
               v-show="(data.propertyAppDate && !data.propertyAppDate.appMethod) && (data.propertyAppDate && !data.propertyAppDate.appMethod)">
            <div class="empty">
              暂无数据
            </div>
          </div>
        </div>

<!--        @touchstart.stop.prevent="touchStart"-->
<!--        @touchmove.stop.prevent="touchMove"-->
<!--        @touchend.stop.prevent="touchEnd"-->
        <!-- 设置人数上限 -->
        <div class="timeSlotMain"
                @touchstart="touchStart"
                @touchmove="touchMove"
                @touchend="touchEnd"
             ref="backTwo"
             id="touchChangeTwo"
             v-show="data.propertySrvAppRule && data.propertySrvAppRule.srvPeopleNum != -1">
          <div class="timeSlot"
               v-show="data.propertyAppDate && data.propertyAppDate.appMethod == '1'">
            <div class="time">
              <div
                v-show="data.propertyAppTimeSlots && data.propertyAppTimeSlots.length > 0">
                <div class="scrollTimeSlot">
                  <div
                    v-for="(timeSlot, index) in data.propertyAppTimeSlots"
                    @click.stop.prevent="selTimeSlot(timeSlot)"
                    :class="{ ttt03: true, selTimeSlotStyle: calcTimeSlot(timeSlot), disableStyle: timeSlot.flag == '1' || timeSlot.flag == '2' }">
                    <div class="ttt03_01">
                      <div class="ttt03_01_01">{{ timeSlot.beginDate }}</div>
                      <div class="ttt03_01_02" v-if="timeSlot.flag == '1'">
                        已约满
                      </div>
                      <div class="ttt03_01_03" v-if="timeSlot.flag == '2'">
                        已过期
                      </div>
                      <div class="ttt03_01_04" v-if="timeSlot.flag != '1' && timeSlot.flag != '2'">
                        剩余:{{ timeSlot.totalNum - timeSlot.alreadyAppNum }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="timeSlot"
               v-show="data.propertyAppDate && (data.propertyAppDate.appMethod == '2' || data.propertyAppDate.appMethod == '3')">
            <div class="time" v-show="data.propertyAppTimeSlots && data.propertyAppTimeSlots.length > 0">
              <div v-show="data.propertyAppTimeSlots && data.propertyAppTimeSlots.length > 0">
                <div class="scrollTimeSlot">
                  <div v-for="(timeSlot, index) in data.propertyAppTimeSlots"
                       @click="selTimeSlot(timeSlot)"
                       :class="{ ttt04: true, selTimeSlotStyle: calcTimeSlot(timeSlot), disableStyle: timeSlot.flag == '1' || timeSlot.flag == '2' }">
                    <div class="ttt04_01">
                      <div class="ttt04_01_01">{{ timeSlot.timeSlotName }}</div>
                      <div class="ttt04_01_02">{{ timeSlot.beginDate }} ~
                        {{ timeSlot.endDate }}
                      </div>
                      <div class="ttt04_01_03" v-if="timeSlot.flag == '1'">已约满
                      </div>
                      <div class="ttt04_01_04" v-if="timeSlot.flag == '2'">已过期
                      </div>
                      <div class="ttt04_01_05" v-if="timeSlot.flag != '1' && timeSlot.flag != '2'">
                        剩余:{{ timeSlot.totalNum - timeSlot.alreadyAppNum }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="emptyMain"
            v-show="(data.propertyAppDate && !data.propertyAppDate.appMethod) && (data.propertyAppDate && !data.propertyAppDate.appMethod)">
            <div class="empty">
              暂无数据
            </div>
          </div>
        </div>
      </div>

      <div>
        <van-field v-model="paramData.phone" type="tel" label="手机号"/>
      </div>

      <div class="remark">
        <div class="titleStyle">备注</div>
        <div class="contentRemark">
          <van-field
            v-model="paramData.remark"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
          />
        </div>
      </div>
      <div class="bottom"/>


      <div class="foot">
        <div class="footContent" v-if="footSelDate.length > 0">
          <div class="left">
            <div>
              已选择: {{ footSelDate }}
            </div>
            <div>
              {{ param.servicePriceLabel }}
            </div>
          </div>
          <div class="right">
            <button :class="{ button: footSelDate.length > 0, buttonDisable: footSelDate.length <= 0 }"
                    :disabled="footSelDate.length <= 0"
                    @click="saveHandle">
              确认预约
            </button>
          </div>
        </div>
        <div class="footContentTwo" v-else>
          <div class="right">
            <button :class="{ button: footSelDate.length > 0, buttonDisable: footSelDate.length <= 0 }"
                    :disabled="footSelDate.length <= 0">
              请先选择时段
            </button>
          </div>
        </div>
      </div>

      <van-calendar
        v-model="dateShow"
        :min-date="minDate"
        :default-date="selDateFormat()"
        :show-confirm="false"
        @confirm="onConfirm"
        :formatter="formatter"
      />
    </div>
  </basic-layout>
</template>
<script>
import {getMyPropertyItemForApp} from "@api/srvAssurance/emplcare/apply/item";
import {getUserPhone} from "@api/srvAssurance/emplcare/apply/index";
import {savePropertyOrder} from "@api/srvAssurance/emplcare/apply/order";
import {calcHHmm, getTwoWeekData} from "@/plugins/utils/formatTime";

export default {
  name: 'apply',
  props: {},
  components: {},
  data() {
    return {
      paramData: {
        propertyId: '',
        appSrvTimeId: '',
        appDateId: '',
        srvitemType: '',
        servicePrice: '',
        serviceDate: '',
        serviceBeginDate: '',
        serviceEndDate: '',
        remark: '',
        phone: '',
      },
      param: {
        propertyId: '',
        appSrvTimeId: '',
        srvitemType: '',
        selDate: null,
        servicePriceLabel: '',
      },
      baseData: {
        propertyName: '',
        propertyAddr: '',
        phone: '',
        servicePriceLabel: '',
      },
      data: {},
      backOneFlagOneOne: false,
      backOneFlagOneTwo: false,
      backOneFlag: false,
      backTwoFlag: false,
      backThreeFlag: false,
      backFourFlag: false,
      weekArr: [],
      checkDate: '',
      minDate: new Date(),
      dateShow: false, //日期show
      timeSlotParam: {
        date: '',
        dropDate: '',
        appSrvTimeId: ''
      },
      footSelDate: '',
      disable: false,

      percent: 0,
      touch: {},
      timeL: true,
      timeR: false,
    }
  },
  created() {
    this.weekArr = getTwoWeekData(new Date(), 14);
    this.getUserPhone();
  },
  computed: {},
  beforeMount() {
    this.clear();
    if (this.$route.query.param.propertyId) {
      this.param = this.$route.query.param;
      this.baseData = this.$route.query.baseData;
      sessionStorage.setItem("eml_care_apply_param", JSON.stringify(this.param))
      sessionStorage.setItem("eml_care_apply_base", JSON.stringify(this.baseData))
    } else {
      this.param = JSON.parse(sessionStorage.getItem("eml_care_apply_param"))
      this.baseData = JSON.parse(sessionStorage.getItem("eml_care_apply_base"))
    }
    this.checkDate = this.param.selDate.substring(5, 7) + "." + this.param.selDate.substring(8, 10);
    this.initData();

    this.$nextTick(() => {
      this.calcWeekLocaltion();
    });
  },
  mounted() {
    this.$nextTick(() => {
      document.getElementById("touchChangeOne").classList.add("r1");
      document.getElementById("touchChangeTwo").classList.add("r1");
    });
  },
  methods: {
    clear() {
      this.data = {};
      this.touch = {};
      this.percent = 0;
    },

    touchStart(e) {
      const touch = e.touches[0];
      this.touch.startX = touch.pageX;
      this.touch.startY = touch.pageY;
    },

    touchMove(e) {
      const touch = e.touches[0];
      //横向和纵向偏离位置
      const deltaX = touch.pageX - this.touch.startX;
      const deltaY = touch.pageY - this.touch.startY;
      // 上下滑动不动
      if (Math.abs(deltaY) > Math.abs(deltaX)) {
        return;
      }
      let offsetWidth = 0;
      if (deltaX > 0) {  //判断动作 是左滑还是右滑
        offsetWidth = Math.min(window.innerWidth, Math.max(-window.innerWidth, deltaX));
      } else if (deltaX < 0) {
        offsetWidth = Math.min(0, Math.max(-window.innerWidth, deltaX));
      } else {
        return;
      }
      //记录滑动的距离占屏幕宽度的百分比，如果滑动太少则不切换
      this.percent = deltaX / window.innerWidth;

      if (offsetWidth >  (window.innerWidth * 0.75)) {
        offsetWidth = window.innerWidth * 0.75;
      }
      if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1) {
        this.$refs.backOne.style["transform"] = `translate3d(${offsetWidth}px, 0, 0)`
        //设置动画时间
        this.$refs.backOne.style["transitionDuration"] = 10
      } else if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum != -1) {
        this.$refs.backTwo.style["transform"] = `translate3d(${offsetWidth}px, 0, 0)`
        //设置动画时间
        this.$refs.backTwo.style["transitionDuration"] = 10
      }
    },

    touchEnd() {
      if (this.percent > 0.3) {
        let val = calcHHmm(this.checkDate, this.weekArr, '-');
        if (val) {
          this.checkItemTwo(val, '1');
        } else {
          this.rebackPlace();
        }
      } else if (this.percent < -0.3) {
        let val = calcHHmm(this.checkDate, this.weekArr, '+');
        if (val) {
          this.checkItemTwo(val, '2');
        } else {
          this.rebackPlace();
        }
      } else if (this.percent == 0) {
        return;
      }
      this.rebackPlace();
      this.percent = 0;
    },

    rebackPlace() {
      if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1) {
        this.$refs.backOne.style["transform"] = `translate3d(0px, 0, 0)`
        //设置动画时间
        this.$refs.backOne.style["transitionDuration"] = 10
      } else if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum != -1) {
        this.$refs.backTwo.style["transform"] = `translate3d(0px, 0, 0)`
        //设置动画时间
        this.$refs.backTwo.style["transitionDuration"] = 10
      }
    },


    calcWeekLocaltion() {
      let weekIndex = 0;
      this.weekArr.forEach((week, index) => {
        if (week.date == this.checkDate) {
          weekIndex = index;
        }
      });
      let ele = document.getElementById("contentWeek");
      ele.scrollTo({
        top: 0,
        left: (weekIndex - 2) * 50,
        behavior: 'smooth'
      });
    },

    saveHandle() {
      if (!this.timeSlotParam.date) {
        this.$Notify({type: 'warning', message: "请先选择时段"});
        return;
      }
      if (!this.paramData.phone) {
        this.$Notify({type: 'warning', message: "请输入手机号"});
        return;
      }
      if (this.paramData.phone && !this.$commonReg.phoneReg.test(this.paramData.phone)) {
        this.$Notify({type: 'warning', message: `${this.$commonReg.phoneMsg}`});
        return;
      }
      let param = {
        propertyId: this.data.propertyId,
        appSrvTimeId: this.paramData.appSrvTimeId,
        appDateId: this.data.propertyAppDate.appDateId,
        srvitemType: this.data.srvitemType,
        servicePrice: this.data.servicePrice,
        serviceBeginDate: this.paramData.serviceBeginDate,
        serviceEndDate: this.paramData.serviceEndDate,
        remark: this.paramData.remark,
        phone: this.paramData.phone,
      }
      savePropertyOrder(param).then(res => {
        if (res.code === 1000 && res.data) {
          this.$toast.success('预约成功');
          let paramData = {
            srvOrderId: res.data,
          }
          this.$router.push({
            path: "/emplcare/appList?srvitemType=" + param.srvitemType,
          })
        }
      })
    },

    selTimeSlot(timeSlot) {
      if (timeSlot.flag == 1 || timeSlot.flag == 2) {
        return;
      } else {
        this.timeSlotParam.date = timeSlot.currentDate + " " + timeSlot.beginDate + ":00";
        this.timeSlotParam.dropDate = timeSlot.currentDate.substring(5, 7) + '.' + timeSlot.currentDate.substring(8, 10);
        this.timeSlotParam.appSrvTimeId = timeSlot.appSrvTimeId;
        this.footSelDate = timeSlot.currentDate + "(" + timeSlot.beginDate + "~" + timeSlot.endDate + ")";
        this.paramData.appSrvTimeId = timeSlot.appSrvTimeId;
        this.paramData.serviceBeginDate = timeSlot.currentDate + ' ' + timeSlot.beginDate + ':00';
        this.paramData.serviceEndDate = timeSlot.currentDate + ' ' + timeSlot.endDate + ':00';
      }
    },

    async getUserPhone() {
      await getUserPhone().then(res => {
        if (res.code === 1000 && res.data) {
          this.paramData.phone = res.data;
        }
      });
    },

    calcDropShow(date) {
      return date == this.timeSlotParam.dropDate && this.checkDate != date;
    },

    calcTimeSlot(timeSlot) {
      if (timeSlot.flag == '1' || timeSlot.flag == '2') {
        return false;
      }
      return this.timeSlotParam.date == timeSlot.currentDate + " " + timeSlot.beginDate + ":00" && this.timeSlotParam.appSrvTimeId == timeSlot.appSrvTimeId;
    },

    checkItem(val) {
      this.checkDate = val.date;
      this.param.selDate = val.fullDate.format("yyyy-MM-dd");
      this.data = {};
      this.initData();

      if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1) {
        document.getElementById("touchChangeOne").classList.remove("r2");
        document.getElementById("touchChangeOne").classList.add("r1");

        this.$refs.backOne.style["transform"] = `translate3d(0px, 0, 0)`;
        this.$refs.backOne.style["transitionDuration"] = 10;
      } else if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum != -1) {
        document.getElementById("touchChangeTwo").classList.remove("r2");
        document.getElementById("touchChangeTwo").classList.add("r1");

        this.$refs.backTwo.style["transform"] = `translate3d(0px, 0, 0)`;
        this.$refs.backTwo.style["transitionDuration"] = 10;
      }

      this.calcWeekLocaltion();
    },

    checkItemTwo(val, type) {
      this.checkDate = val.date;
      this.param.selDate = val.fullDate.format("yyyy-MM-dd");
      this.data = {};
      this.initDataTwo(type);
    },

    onConfirm(date) {
      this.weekArr = getTwoWeekData(date, 14);
      let dateStr = this.formatDate(date);
      this.checkDate = dateStr.substring(5, 7) + "." + dateStr.substring(8, 10);
      let val = this.weekArr.filter(week => week.date == this.checkDate)[0];
      this.checkItem(val);
      this.dateShow = false;
    },

    // 日期添加备注
    formatter(day) {
      // 当前月份的日
      let dd = new Date(day.date).format("MM.dd");
      if (this.calcDropShow(dd)) {
        day.bottomInfo = "已选择";
      }
      return day
    },

    selDateFormat() {
      let dateStr = this.param.selDate;
      let date = new Date(dateStr);
      return date;
    },

    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() < 9
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1)
      }-${date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate()}`;
    },

    async initData() {
      let param = {
        propertyId: this.param.propertyId,
        srvitemType: this.param.srvitemType,
        date: this.param.selDate,
      }
      await getMyPropertyItemForApp(param).then((res) => {
        if (res.code === 1000 && res.data) {
          let row = res.data;
          this.data = row;

          this.backOneFlagOneOne = (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1) && (this.data.propertyAppDate && !this.data.propertyAppDate.appMethod) && (this.data.propertyAppDate && !this.data.propertyAppDate.appMethod)
          this.backOneFlagOneTwo = (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum != -1) && (this.data.propertyAppDate && !this.data.propertyAppDate.appMethod) && (this.data.propertyAppDate && !this.data.propertyAppDate.appMethod)

          this.backOneFlag = this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1 && this.data.propertyAppDate && this.data.propertyAppDate.appMethod == '1';
          this.backTwoFlag = this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1 && this.data.propertyAppDate && (this.data.propertyAppDate.appMethod == '2' || this.data.propertyAppDate.appMethod == '3');
          this.backThreeFlag = this.data.propertyAppDate && this.data.propertyAppDate.appMethod == '1';
          this.backFourFlag = this.data.propertyAppDate && (this.data.propertyAppDate.appMethod == '2' || this.data.propertyAppDate.appMethod == '3');

        }
      });
    },

    async initDataTwo(type) {
      let param = {
        propertyId: this.param.propertyId,
        srvitemType: this.param.srvitemType,
        date: this.param.selDate,
      }
      await getMyPropertyItemForApp(param).then((res) => {
        if (res.code === 1000 && res.data) {
          let row = res.data;
          this.data = row;

          if (type == '1') {
            if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1) {
              document.getElementById("touchChangeOne").classList.remove("r2");
              document.getElementById("touchChangeOne").classList.add("r1");
            } else if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum != -1) {
              document.getElementById("touchChangeTwo").classList.remove("r2");
              document.getElementById("touchChangeTwo").classList.add("r1");
            }
          } else if (type == '2') {
            if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1) {
              document.getElementById("touchChangeOne").classList.remove("r1");
              document.getElementById("touchChangeOne").classList.add("r2");
            } else if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum != -1) {
              document.getElementById("touchChangeTwo").classList.remove("r1");
              document.getElementById("touchChangeTwo").classList.add("r2");
            }
          }


          this.$nextTick(() => {
            if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum == -1) {
              this.$refs.backOne.style["transform"] = `translate3d(0px, 0, 0)`
              this.$refs.backOne.style["transitionDuration"] = 10
            } else if (this.data.propertySrvAppRule && this.data.propertySrvAppRule.srvPeopleNum != -1) {
              this.$refs.backTwo.style["transform"] = `translate3d(0px, 0, 0)`
              this.$refs.backTwo.style["transitionDuration"] = 10
            }
          })
          this.calcWeekLocaltion();
        }
      });
    },

  },
}
</script>
<style lang="less" scoped>

.main {
  background-color: #f9f9f9;
  //display: flex;
  //flex-direction: column;
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
  }


  .head {
    background: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    height: 3rem;
    padding: 10px 0px 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .picStyle {
      background-image: url('../../../../assets/images/care/hair_cut.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }

    .picStyle_liliao {
      background-image: url('../../../../assets/images/care/li_liao.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }

    .picStyle_water {
      background-image: url('../../../../assets/images/care/water.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_clean {
      background-image: url('../../../../assets/images/care/cleaning.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_laundry {
      background-image: url('../../../../assets/images/care/xiyi.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_xiche {
      background-image: url('../../../../assets/images/care/xiche.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }


    .picStyle_banyun {
      background-image: url('../../../../assets/images/care/banyun.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }

    .picStyle_lvhua {
      background-image: url('../../../../assets/images/care/lvhua.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100px;
      width: 100px;
      background-color: #f9f9f9;
      color: rgb(51, 51, 51);
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
    }

    .rightContent {
      width: calc(100% - 90px);
      height: 100px;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .firstContent {
        .f {
          height: 25px;
          line-height: 25px;
          display: flex;
          justify-content: space-between;

          div:first-child {
            font-size: 16px;
            font-weight: 600;
          }
        }

        .s {
          display: flex;
          flex-wrap: nowrap;
          font-size: 10px;
          color: #878888;
        }
      }

      .secondContent {
        color: #d7a550;
        font-size: 18px;
      }
    }

  }


  .appTime {
    background: #ffffff;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
    min-height: 75px;
    overflow-x: hidden;

    .titleStyle {
      padding: 10px 14px;
      font-size: 15px;
      color: #333333;
      line-height: 1;
      font-weight: 600;
      height: 0.5rem;

      span:first-child {
        color: #00000042;
      }

      &:before {
        content: " ";
        display: inline-block;
        width: 3px;
        height: 16px;
        border-radius: 2px;
        background: #d7a550;
        margin-right: 4px;
        vertical-align: -2px;
      }
    }

    .calendar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #FFFFFF;
      height: 1.2rem;

      .leftDate {
        width: 80%;
        margin-left: 14px;

        .content {
          overflow-x: auto;
          display: flex;
          border-right: 1px solid #ccc;
          align-items: center;
          justify-content: flex-start;

          &::-webkit-scrollbar {
            width: 0px !important;
            height: 0px !important;
          }

          .dates {
            margin: 0px 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .active {
              border: 1px solid rgb(220, 223, 230);
              border-radius: 4px;
              width: 100%;
              background: #d7a550 !important;
              height: 40px;

              div {
                color: #ffffff !important;
              }
            }

            .leftDateStyle {
              div:first-child {
                font-size: 14px;
                font-weight: 600;
                text-align: center;
                width: 40px;
                height: 20px;
                line-height: 20px;
              }

              div:last-child {
                font-size: 10px;
                color: #878888;
                text-align: center;
                width: 40px;
                height: 20px;
                line-height: 20px;
              }
            }

            .dropShow {
              position: relative;

              &:before {
                height: 5px;
                position: absolute;
                width: 5px;
                border-radius: 30px;
                margin-left: 90%;
                margin-top: -3%;
                content: " ";
                background: #d7a550;
              }

            }
          }
        }
      }
    }


    .timeSlotMain {
      height: 100%;
      padding: 10px 14px 10px 14px;
      min-height: 150px;

      .timeSlot {
        height: 100%;

        .scrollTimeSlot {
          white-space: nowrap;

          .ttt {
            width: calc(22%);
            float: left;
            text-align: center;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            height: 45px;
            margin: 5px 0px;
          }


          .ttt01 {
            width: calc(22%);
            float: left;
            text-align: center;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            //height: 45px;
            //margin: 5px 0px;
            margin: 0px 5px 5px 0px;
            float: left;

            .ttt_01_01 {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              .ttt_01_01_01 {
                display: flex;
                height: 100%;
                align-items: center;
              }

              .ttt_01_01_02 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt_01_01_03 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt_01_01_04 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
                background-color: #00000029
              }
            }
          }


          .ttt02 {
            //width: calc(22%);
            //float: left;
            //text-align: center;
            //border: 1px solid rgb(220, 223, 230);
            //border-radius: 4px;
            width: calc(49%);
            float: left;
            text-align: center;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            height: 60px;
            margin: 5px 0px;

            .ttt02_01 {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              .ttt02_01_01 {
                display: flex;
                height: 100%;
                align-items: center;
              }

              .ttt02_01_02 {
                display: flex;
                height: 100%;
                align-items: center;
              }

              .ttt02_01_03 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt02_01_04 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt02_01_05 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
                background-color: #00000029
              }
            }
          }


          .ttt03 {
            width: calc(22%);
            //float: left;
            text-align: center;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            //height: 45px;
            //margin: 5px 0px;

            margin: 0px 5px 5px 0px;
            float: left;
            height: 45px;

            .ttt03_01 {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              .ttt03_01_01 {
                display: flex;
                height: 100%;
                align-items: center;
              }

              .ttt03_01_02 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt03_01_03 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt03_01_04 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
                background-color: #00000029
              }

            }
          }

          .ttt04 {
            //width: calc(22%);
            //float: left;
            //text-align: center;
            //border: 1px solid rgb(220, 223, 230);
            //border-radius: 4px;
            //height: 45px;
            //margin: 5px 0px;

            width: calc(47%);
            margin: 0px 5px 5px 0px;
            float: left;
            text-align: center;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            height: 60px;

            .ttt04_01 {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              .ttt04_01_01 {
                display: flex;
                height: 100%;
                align-items: center;
              }

              .ttt04_01_02 {
                display: flex;
                height: 100%;
                align-items: center;
              }

              .ttt04_01_03 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt04_01_04 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
              }

              .ttt04_01_05 {
                font-size: 10px;
                width: 100%;
                border-top: 1px solid rgb(204, 204, 204);
                background-color: #00000029
              }

            }

          }


          .selTimeSlotStyle {
            background-color: #fbf5eb;
            color: #d7a651;
          }

          .disableStyle {
            background-color: #e5e6e5 !important;
          }
        }

      }


      .emptyMain {
        height: 150px;

        .empty {
          display: flex;
          align-items: center;
          height: 100%;
          width: 100%;
          justify-content: center;
        }

      }
    }


    .rightCalendar {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #989999;
      height: 42px;

      div:first-child {
        font-size: 20px;
        margin-top: -5px;
      }

      div:last-child {
        font-size: 10px;
        margin-top: -5px;
      }
    }
  }

  .remark {
    background: #ffffff;
    margin: 10px 0px;

    .titleStyle {
      padding: 10px 14px;
      font-size: 15px;
      color: #333333;
      line-height: 1;
      font-weight: 600;

      &:before {
        content: " ";
        display: inline-block;
        width: 3px;
        height: 16px;
        border-radius: 2px;
        background: #d7a550;
        margin-right: 4px;
        vertical-align: -2px;
      }
    }

    .contentRemark {
      //margin-bottom: 90px;
    }

  }

  .bottom {

    &:before {
      content: " ";
      display: inline-block;
      width: 100%;
      height: 70px;
      vertical-align: -2px;
    }
  }

  .foot {
    position: absolute;
    width: 100%;
    background: #ffffff;
    padding: 10px 0;
    right: 0px;
    bottom: 0px;
    height: 45px;
    z-index: 1;

    .footContent {
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      margin: 0px 10px;

      .left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        div:first-child {
          font-size: 10px;
        }

        div:last-child {
          color: #d7a550;
          font-size: 18px;
        }
      }

      .right {
        .button {
          color: #ffffff;
          background-color: #d9a553;
          border: 1px solid #d9a553;
          border-radius: 20px;
          height: 45px;
          line-height: 45px;
          width: 120px;
          font-size: 17px;
        }

        .buttonDisable {
          color: #ffffff;
          background-color: #e5e6e5;
          border: 1px solid #e5e6e5;
          border-radius: 20px;
          height: 45px;
          line-height: 45px;
          width: 120px;
          font-size: 17px;
        }
      }
    }

    .footContentTwo {
      margin: 0px 10px;

      .right {
        float: right;

        .button {
          color: #ffffff;
          background-color: #d9a553;
          border: 1px solid #d9a553;
          border-radius: 20px;
          height: 45px;
          line-height: 45px;
          width: 120px;
          font-size: 17px;
        }

        .buttonDisable {
          color: #ffffff;
          background-color: #e5e6e5;
          border: 1px solid #e5e6e5;
          border-radius: 20px;
          height: 45px;
          line-height: 45px;
          width: 120px;
          font-size: 17px;
        }
      }
    }
  }

}


.showDrop {
  background-color: #00a9ff;

  position: relative;

  &:before {
    content: " ";
    display: inline-block;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #d7a550;
    margin-right: 4px;
    vertical-align: -2px;
  }
}


.r1 {
  position: relative;
  animation: move1 1s;
  -webkit-animation: move1 1s;

  @keyframes move1 {
    0% {
      top: 0px;
      left: -400px;
    }
    100% {
      top: 0px;
      left: 0px;
    }
  }
}

.r2 {
  position: relative;
  animation: move2 1s;
  -webkit-animation: move2 1s;

  @keyframes move2 {
    0% {
      top: 0px;
      left: 400px;
    }
    100% {
      top: 0px;
      left: 0px;
    }
  }
}


</style>
